<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    {{include 'pages/base/layout.html'}}

    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.core-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.excheck-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.exedit-3.5.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/zTree/v3/css/metroStyle/metroStyle.css')}}" type="text/css">
</head>
    <SCRIPT type="text/javascript">
        var Tree1, Tree2;
        var setting = {
            view: {
            },
            check: {
                enable: true,
                autoCheckTrigger: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "ps", "N": "ps" }
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                onClick: onClick
            }
        };
        var zNodes=[{{for row in factor:}}{id:'{{=row.id}}',pId:'{{=row.parent_id}}',name:'{{=row.name}}'},{{pass}}];

        function onClick(event, treeId, treeNode) {
            if(treeId=="srcTree")
                Tree1.checkNode(treeNode, !treeNode.checked, true);
            else
                Tree2.checkNode(treeNode, !treeNode.checked, true);
//            $('#mainFrame').attr("src","{{=URL('demo','demoform1')}}"+"?id="+treeNode.id);
        };

        $(document).ready(function(){
           Tree1 = $.fn.zTree.init($("#srcTree"), setting, zNodes);
           Tree2 = $.fn.zTree.init($("#tarTree"), setting, null);
        });

        //数据右移动
		function addRole() {
            //表示Tree1移动致Tree2
            moveTreeNode(Tree1, Tree2);
		}
		//数据左移动
		function delRole() {
			//移动方法 参数相反
			moveTreeNode(Tree2, Tree1);
		}
        //数据右移动
		function addAllRole() {
		    Tree1.checkAllNodes(true);
            //表示Tree1移动致Tree2
            moveTreeNode(Tree1, Tree2);
		}
		//数据左移动
		function delAllRole() {
		    Tree2.checkAllNodes(true);
			//移动方法 参数相反
			moveTreeNode(Tree2, Tree1);
		}




		function moveTreeNode(zTree1, zTree2){
			var nodes = zTree1.getCheckedNodes(true);	//获取选中需要移动的数据
			for(var i=0;i<nodes.length;i++){			//把选中的数据从根开始一条一条往右添加
				var node = nodes[i];

				var strs={};			//新建一个JSON 格式数据,表示为一个节点,可以是根也可以是叶
				strs.id =node.id;
				strs.pId=node.pId;
				strs.name= node.name;
				strs.nodes = new Array();	//树节点里面有个 nodes 集合,用来存储父子之间的包涵关系

				//调用添加方法
				//strs : json 格式..拼装成树的一个节点
				//zTree2: 表示需要添加节点的树
				zTreeDataAddNode(strs,zTree2);

				//获取这个被添加的code 如果是右增加  用来把它从左边移除掉
				var sid = strs.pId;
						//sid = sid.substring(0, sid.lastIndexOf("-"));

				//使用递归移除 移除的时候从叶子开始找  和增加的时候刚好相反
				//参数1就是数组最后一个数据
				//scode  : 上面截取的code 表示父亲节点
				//zTree1 : 需要移除的树,在zTree1 里面移除此对象
				zTreeDataDelete(nodes[nodes.length-(i+1)],sid,zTree1);
            }
				//把选中状态改为未选择
				zTree2.checkAllNodes(false);
				zTree1.checkAllNodes(false);

				//刷新
				zTree2.refresh();
				zTree1.refresh();
		}

		//树数据移动方法
		function zTreeDataAddNode(strs,zTree2){
		    debugger;
			var nodes = zTree2.transformToArray(zTree2.getNodes());	//获取需要添加数据的树下面所有节点数据

			//如果有多个数据需要遍历,找到strs 属于那个父亲节点下面的元素.然后把自己添加进去
			if(nodes.length > 0){

				//这个循环判断是否已经存在,true表示不存在可以添加,false存在不能添加
				var isadd=true;
				for(var j=0;j<nodes.length;j++){
						if(strs.id==nodes[j].id){
							isadd=false;
							break;
						}
				}

				//找到父亲节点
				var sid = strs.pId;
				var i=0;
				var flag =false;
				for(i ;i<nodes.length;i++){
					if(sid ==nodes[i].id){
						flag = true;
						break;
					}
				}

				//同时满足两个条件就加进去,就是加到父亲节点下面去
				if(flag && isadd){
						var treeNode1=nodes[i];
						//treeNode1.nodes[treeNode1.nodes.length <=0 ? 0 : treeNode1.nodes.length++]=strs;
                        zTree2.addNodes(treeNode1,strs);
				//如果zTree2 里面找不到,也找不到父亲节点.就把自己作为一个根add进去
				}else if(isadd){
						zTree2.addNodes(null,strs);
					}
			}else{
						//树没任何数据时,第一个被加进来的元素
						zTree2.addNodes(null,strs);
			}
		}

		//数据移除
		function zTreeDataDelete(node,sid,zTree1){
		    debugger;
			if(node.isParent){	//判断是不是一个根节点,如果是一个根几点从叶子开始遍历寻找

				//如果是个根就检测nodes里面是否有数据
					if(node.children.length > 0){
								//取出来
								var fnodes  = node.children;
								for(var x = 0; x<fnodes.length; x++){
									//不是根节点.并且code 相当就是需要移除的元素
									if(!(fnodes[x].isParent) && fnodes[x].id==sid){
											//调用ztree 的移除方法,参数是一个节点json格式数据
											zTree1.removeNode(fnodes[x]);

											//如果当前这个节点又是个根节点.开始递归
									}else if(fnodes[x].isParent){
											zTreeDataDelete(fnodes[x],sid);
									}
								}
						}else{
								//如果是个根,但是下面的元素没有了.就把这个根移除掉
								zTree1.removeNode(node);
						}
				}else{
					//不是就直接移除
					zTree1.removeNode(node);
				}
		}


    </SCRIPT>
<body>

<div class="container"  >
     <table width="100%"  cellspacing="1" cellpadding="3" align="center" border="0" bgColor="#000000">
         <tr>
    		<td  align="left" valign="middle">
    			<p>因子分类：</p>
    		</td>
             <td  align="left" valign="middle">

    		</td>
             <td  align="left" valign="middle">
    			<p>模型因子：</p>
    		</td>
    	</tr>
    	<tr>
    		<td align="left" valign="top" width="40%" id="td_tree1" style="border: 1px solid #617775">
				<ul id="srcTree" class="ztree" style="width:100%; overflow:auto;"></ul>
			</td>
    		<td align="center" valign="middle" width="10%">
                <input id="" type="button" value=">  " onclick="addRole()"></input><br><br>
                <input id="" type="button" value="<  " onclick="delRole()"></input><br><br>
    		    <input id="" type="button" value=">>" onclick="addAllRole()"></input><br><br>
                <input id="" type="button" value="<<" onclick="delAllRole()"></input>
    		</td>
    		<td align="left" valign="top" width="40%" id="td_tree2"  style="border: 1px solid #617775">
				<ul id="tarTree" class="ztree" style="width:100%; overflow:auto;"></ul>
			</td>
    	</tr>
    </table>

</div>

</body>
</html>